<template>
  <div class="mask-widget-wrapper">

    <div class="left">

      <div class="top">
        <img class="top-icon" src="../assets/image/icon-logo.png">
      </div>

      <div class="slide">
        <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
          @close="handleClose">

          <template v-for="(value, key, pos) in menuTitles"  >

            <template v-if="menuSubtitles(value.name).length > 0">

              <el-sub-menu :key="value.id" :index="value.id">

              <template #title>
                <el-icon>
                  <icon-menu />
                </el-icon>
                <span>{{ value.displayName }}</span>
              </template>
             
              <el-menu-item  v-for="(item, key, subPos) in menuSubtitles(value.name)" :key="item.id" :index="item.id" @click="menuClick(item)">
                 {{ item.displayName }}
              </el-menu-item>

            </el-sub-menu>
            
            </template>

            <template v-else>
                <el-menu-item  :index="value.id" @click="menuClick(value)">
                  <el-icon><icon-menu /></el-icon>
                  <template #title>{{ value.displayName }}</template>
                </el-menu-item>
           </template>


          </template>

        </el-menu>
      </div>

    </div>

    <div class="right">
      <img class="slide-bar" src="../assets/image/icon_sidebar.png" @click="slideBarClick()">
    </div>

  </div>
</template>

<script lang="ts" setup>

import { ref, computed, watch } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {
  ElMenu,
  ElRadioGroup,
  ElRadioButton,
  ElSubMenu,
  ElMenuItemGroup,
  ElMenuItem,
  ElIcon
} from 'element-plus'

const props = defineProps({
  menus: {
    type: Array as PropType<IResolvedMenu[]>,
    default: []
  },
  onClick: {
    type: Function as PropType<(menuName: string) => Promise<void>>
  },
});


const menuTitles = ref([]);
watch(() => props.menus, () => {
  console.log("props menus = ", props.menus)
  menuTitles.value = []
  if (props.menus.length > 0) {
    props.menus.forEach(value => {
      if (value.parentName === undefined) {
        menuTitles.value.push(value)
      }
    }
    );
  }
})

const menuSubtitles = computed(() => (name: string) => {
  let datas = [];
  for (let i = 0; i < props.menus.length; i++) {
    if (props.menus[i].parentName === name) {
      datas.push(props.menus[i])
    }
  }
  return datas;
});

const isCollapse = ref(true);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log("handleOpen", key, keyPath)
 };
const handleClose = (key: string, keyPath: string[]) => {
  console.log("handleClose", key, keyPath)
};

const slideBarClick = () => {
  isCollapse.value = !isCollapse.value;
}

const menuClick = (item: IResolvedMenu) => {
  console.log("onClick", props.onClick)
  props.onClick?.({ value: item, key: item.displayName })
}

</script>

<style lang="scss"  scoped>

.mask-widget-wrapper {

  --el-menu-text-color: #eee !important;
  --el-menu-hover-bg-color: #000 !important;

  display: flex;
  align-items: center;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-color: #000;
    border-radius: 0px 20px 20px 0px;

    .top {
      margin: 0, auto;
      .top-icon {
        margin-top: 10px;
        width: 40px;
      }
    }

  }

  .right {
    .slide-bar {
      width: 20px;
    }
  }
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

::v-deep .el-menu {
  background-color: #000;
  margin-top: 10px;
  border-right: 0
}

.el-menu-item.is-active {
  font-size: 16px;
}

</style>